<script setup>
import {ref, onMounted, onUnmounted, } from "vue";
import {
  checkActivityIsOrderAPI,
  getActivityDetailsAPI,
  getDetailsAPI,
  getRecordViewCountAPI
} from "../services/shop_detail";
import {getAdCallBackAPI} from "../services/index";
import {
  onAddToFavorites,
  onHide,
  onLoad,
  onShareAppMessage,
  onShareTimeline,
  onShow,
  onUnload,
  onPageScroll
} from "@dcloudio/uni-app";
import {conUtils} from "../utils/conUtils";
import {handleGetTime} from "../utils/date";
import {useCommonInfoStore} from "../stores/modules/commonInfo";
import {BaseImgUrl, BaseURL} from "../utils/lshttp";
import {useUserInfoStore} from "../stores/modules/userInfo";
import {cancelOrderAPI, doOrderAPI} from "../services/order";
import {useOrderInfoStore} from "../stores/modules/orderInfo";
import {getBuToPagePath, getToPagePath, toMiniAppBusiness, toMiniAppRedPage, toMiniAppSearch} from "../utils/utils";
import LszbgDowload from "../components/LszbgDowload.vue";
import Quan from "../pages/shopdetail/quan.vue";
// #ifdef H5
import jweixin from "weixin-js-sdk";
import Othergoods from "../pages/shopdetail/othergoods.vue";
// #endif
const orderInfoStore = useOrderInfoStore()
const commonInfoStore = useCommonInfoStore()
const userInfoStore = useUserInfoStore()
const { twoFixed } = useCommonInfoStore() // 使用commonInfoStore状态管理器

const shop = ref()
const activity = ref() // 活动列表
const shopID = ref() // 店铺ID
const tabIndex = ref(0) // 当前活动索引
const activityId = ref(0) // 活动ID
const orderId = ref(0) // 订单ID,用在订单详情页面查询
const activity_rules = ref([])
const activity_item = ref()
const isSellOut = ref(false) // 是否已售罄
const isSellTime = ref(false)  // 是否在抢单时间
const resShow = ref(false)
const qdTip = ref(false)
const qdType = ref(0)
const checkActivityIsOrder = ref({is_order: 1})
const begin = ref([]) //判断活动开始和未开始 0未开始   1已开始  2已结束,//倒计时时间
const takeMoney = ref(0) // 抢购金额=最低消费-会员补贴
const shopDetailLoading = ref(false)
const applet = ref(0)
const parent_id = ref()
const red_id = ref(0)
const card_id = ref(0)
const isWork = ref('')
const wxShareTip = ref(false) //分享提示
const orderShareShow = ref(false) //订单分享进来是否弹出提示
const newUser = ref() //是否是新用户
const isShowTipsBox = ref(false) // 首单提示是否显示

onLoad(async (options) => {
  console.log("ShopDetail = ", options)

  // #ifdef H5
  console.log("ShopDetail = ", location.href)
  commonInfoStore.initJSDKConfig()
  isH5.value = true
  showShare.value = options.showShare
  // #endif

  // 当前活动索引
  tabIndex.value = parseInt(options['activeIndex'] || 0)
  // 当前活动ID
  activityId.value = options.activityId
  // 非官返店铺详情页面的分享朋友圈报错“店铺ID必须”问题,是因为获取的shopId参数为空，所以这里手动设置
  if (options.shopId){
    shopID.value = options.shopId
  } else {
    shopID.value = options.id
  }
  console.log(typeof shopID.value, 'shopID==', typeof options.id)
  /* #ifdef MP */

  /* #endif */

  applet.value = options.applet || 0
  parent_id.value = options.parent_id ? options.parent_id : options.id

  if (options.wxShareTip){
    wxShareTip.value = true
  }
  if (options.orderShareShow){
    orderShareShow.value = options.orderShareShow
  }
  // 套餐查看计数接口，用户访问一次计数一次
  await getRecordViewCountAPI(shopID.value)
})
// 用户信息
const userInfo = ref()
const getUserInfo = async () => {
  console.log("获取用户信息:", userInfoStore.userInfo)
  userInfo.value = userInfoStore.userInfo
  if (userInfoStore.isNewUser){
    newUser.value = "新用户"
    isShowTipsBox.value = true
  }else {
    newUser.value = "老用户"
    isShowTipsBox.value = false
  }

}
const distance = ref(false)
onShow(async () => {
  const addressDel = commonInfoStore.addressDel
  /* 返回页面刷新用户信息 */
  await getUserInfo()
  const detilsData = {
    shop_id: shopID.value,
    shop_activity_id: activityId.value,
    lat: addressDel?.lat,
    lng: addressDel?.lng
  }
  // 店铺详情数据
  const res = await getDetailsAPI({
    shop_id: shopID.value,
    shop_activity_id: activityId.value,
    lat: addressDel?.lat,
    lng: addressDel?.lng
  })
  // 活动详情数据
  /* const activityRes = await getActivityDetailsAPI({
    shop_id: shopID.value,
    shop_activity_id: activityId.value,
    lat: addressDel?.lat,
    lng: addressDel?.lng
  }) */
  shopDetailLoading.value = true
  shop.value = res.result
  console.log("店铺详情 = ", shop.value)
  isWork.value = res.result.is_work
  res.result.activity.forEach(item => {
    if (activityId.value == item.id){
      activity_item.value = item
    }
  })
  activity_rules.value = activity_item.value.new_activity_rules
  console.log('activity_item=', activity_item.value)
  if (shop.value.activity == ''){
    uni.showModal( {
      title: '提示',
      content: '此店铺已售罄或已下架，请选择其他店铺！',
      showCancel: false,
      success: function (res) {
        uni.navigateBack({
          delta: 1
        })
      }
    })
  } else {
    shop.value.activity.forEach(item => {
      if (item.id === activityId.value){
        activity_item.value = item
      }
    })
  }



  if (shop.value.is_location && (shop.value.distance > 5) && shop.value.is_hot ===1) {
    distance.value = true
  }

  setBtnStatus(tabIndex.value)
  shareClick()
  // 分享-进来，判断店铺是否下架
  if (isWork.value === 0){
    // 跳转分享注册页
    uni.navigateTo({url: '/pages/share/share_register'});
  }
})
const scHeight = ref(0)
onPageScroll((e) => {
  scHeight.value = e.scrollTop
  // console.log('滚动距离==', e.scrollTop)
})
const setBtnStatus = (index) => {
  // activity_item.value = activity.value[index]
  begin.value = handleGetTime(activity_item.value)
  // activity_rules.value = activity.value[index].new_activity_rules
  isSellOut.value = activity_item.value.day_num === activity_item.value.total_count
  isSellTime.value = activity_item.value.is_work == 1
  setMoneyShare()
}

const checkCanOrder = async () => {
  const res = await checkActivityIsOrderAPI(activity_item.id)
  checkActivityIsOrder.value = res.result
}

// tab切换
const handleChangeTabs = (item, Index) => {
  tabIndex.value = Index
  setBtnStatus(Index)
}

// 进群
const jinqun = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  uni.navigateTo({
    url: '/pages/share/vipgroup'
  })
}
// 会员
const goVip = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  /* uni.navigateTo({
    url: '/pages/member/member'
  }) */
  uni.reLaunch( {
    url: '/pages/index/index'
  })
}
const timeStr = ref(0)
const knowshow = ref(false)
const qdSuccess = ref(false)
const bmSuccess = ref(false)
const toSettingInfo = () => {
  uni.showModal({
    title: '提示-绑定手机号',
    content: '抢单需要绑定手机号，用于订单核验，和订单状态通知，是否去绑定？',
    confirmText: '去绑定',
    success: async function (res) {
      if (res.confirm) {
        await uni.navigateTo({
          url: "/pagesme/settinginfo"
        })
      }
    }
  })
}

const hotShopQD = (type) => {
  if (!userInfoStore.isLogin()) {
    return
  }
  // 小程序整改添加
  if (!useUser.userInfo.username) {
    toSettingInfo()
    return
  }
  // 如果是平台活动
  qdTip.value = true
  qdType.value = type

}

// 不领红包跳转商家
const tiaoZhuanMT = async (shopID, activityID) => {
  if (!userInfoStore.isLogin()) {
    return
  }
  // 小程序整改添加
  if (!useUser.userInfo.username) {
    toSettingInfo()
    return
  }
  // 广告平台返回值callback提交到后台
  if (commonInfoStore.callback){
    await getAdCallBackAPI({
      callback: commonInfoStore.callback,
      eventType: 'shop'
    })
  }

  const res = await doOrderAPI(activity_item.value.id, commonInfoStore.addressDel, red_id.value, card_id.value)
  console.log("报名结果==", res.result)
  orderId.value = res.result.order_id
  timeStr.value = Number(res.result.time_num) * 60

  orderInfoStore.setIsRefresh(true)
  // 显示抢单须知弹窗
  knowshow.value = true
  // 跳转美团商家后设定此变量为 true，返回店铺详情页，进入下单流程
  bmSuccess.value = true
  // uni.showToast({title: "报名成功", icon: "success", duration: 1500})
  /* setTimeout(() => {
    uni.navigateTo( {
      url: "/pages_shopdetail/shop_process?orderId=" + orderId.value + "&signUp=1"
    })
  }, 1000) */
  // knowshow.value = true
  await djsToMeiTuan(1)
}
// 取消订单
const cancelOrder = async (orderId) => {
  uni.showModal({
    title: '提示',
    content: '您是否确认取消订单?',
    success: async function (res) {
      if (res.confirm) {
        const res = await cancelOrderAPI(orderId)
        await uni.showToast({
          title: res.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          })
        }, 1500)
      }
    }
  });
}
// 领红包跳转商家
const tiaoZhuanMTRed = async () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  // 小程序整改添加
  if (!useUser.userInfo.username) {
    toSettingInfo()
    return
  }

  // 广告平台返回值callback提交到后台
  if (commonInfoStore.callback){
    await getAdCallBackAPI({
      callback: commonInfoStore.callback,
      eventType: 'shop'
    })
  }

  const res = await doOrderAPI(activity_item.value.id, commonInfoStore.addressDel, red_id.value, card_id.value)
  if (res.result.order_id){
    orderId.value = res.result.order_id
  }
  console.log('商家id==',  res.result.order_id)
  resShow.value = true
  qdSuccess.value = true
  orderInfoStore.setIsRefresh(true)
  await djsToMeiTuan(0)
}
const copyShow = ref(false)
// 复制店铺名称
const handleCopyName = async (shopName) => {
  uni.setClipboardData({
    data: shopName,
    success() {
      uni.hideToast();
      showCopy.value = true
      djsToMeiTuan(2)
    }
  })
}

onShow(() => {
  if (qdSuccess.value) {
    // 旧版本跳转地址
    /* uni.switchTab({
      url: "/pages/order/order",
    }) */
    qdSuccess.value = false
    // 新版本跳转地址
    uni.navigateTo({
      url: "/pages_shopdetail/shop_process?orderId=" + orderId.value + "&signUp=2",
    })
  }
  if (bmSuccess.value) {
    bmSuccess.value = false
    // 新版本跳转地址
    uni.navigateTo({
      url: "/pages_shopdetail/shop_process?orderId=" + orderId.value + "&signUp=1",
    })
  }
})
// 监听跳转
const handleLaunch = (e) => {
  showSelect.value = false
  showCopy.value = false
  console.log("handleLaunch", e)
}
// 监听错误
const handleError = (e) => {
  console.log("handleError", e)
}
const count = ref(2)
const time = ref()
onUnload(() => {
  clearTime()
})
onHide(() => {
  clearTime()
  // qdSuccess.value =  false
})
onShow(() => {
  clearTime()
})
const clearTime = () => {
  if (time.value) {
    clearInterval(time.value)
    count.value = 3
  }
}
const djsToMeiTuan = async (type) => {
  // #ifdef H5
  if (isH5) {
    return
  }
  // #endif
  if (time.value) {
    clearInterval(time.value)
    count.value = 3
  }
  time.value = setInterval(async () => {
    count.value = count.value - 1
    if (count.value <= 0) {
      clearInterval(time.value)
      if (type === 0 && isClose.value) {
        await doMeiTuanAndQiangDan()
      } else if (type === 1 && isClose.value) {
        await goShop()
      } else if (isClose.value) {
        await goMeiTuanSearch()
      }
      isClose.value = true
      count.value = 1
    }
  }, 1000)
}
const isClose = ref(true)
const showSelect = ref(false)
const showEwm = ref(false)
const showCopy = ref(false)
const isH5 = ref(false)
const isNoShow = ref(commonInfoStore.isNoShow)
// 进入美团或饿了么店铺
const goShop = async () => {
  // showSelect.value = true
  onChooseList(0)
}
const chooseList = ref([
  {
    icon: "home", name: "小程序进店"
  },
  // #ifdef MP
  // {
  //   icon: "scan", name: "识别二维码进店"
  // },
  // #endif
  // {
  //   icon: "star", name: "复制店铺名搜索"
  // }
])
const onChooseList = (index) => {
  clearTime()
  showSelect.value = false
  switch (index) {
    case 0:
      knowshow.value = false
      toMiniAppBusiness(shop.value.type, shop.value.path)
      break;
    case 1:
      if (chooseList.value.length === 2) {
        showCopy.value = true
        djsToMeiTuan(2) //倒计时类型搜索
        return
      }
      showEwm.value = true
      break;
    case 2:
      uni.setClipboardData({
        data: shop.value.name,
        success() {
          uni.hideToast();
        }
      })
      if (isNoShow.value === false) {
        showCopy.value = true
        djsToMeiTuan(2) //倒计时类型搜索
      } else {
        goMeiTuanSearch()
      }
      break;
  }
}

const onClickIsNoShow = () => {
  isNoShow.value = !isNoShow.value
  conUtils("isNoShow.value", isNoShow.value)
  commonInfoStore.setIsNoShow(isNoShow.value)
}

const closePop = () => {
  knowshow.value = false
  resShow.value = false
  isClose.value = false
  showCopy.value = false
}
// 报名不跳转美图、京东、饿了么，直接跳转下单流程页面
const closeNoticePop = () => {
  // 隐藏抢单须知
  knowshow.value = false
  // 隐藏领红包跳转通知
  resShow.value = false
  // 抢单领红包报名返回确认
  qdSuccess.value = false
  // 只报名跳转商家返回确认
  bmSuccess.value = false
  uni.navigateTo({
    url: "/pages_shopdetail/shop_process?orderId=" + orderId.value + "&signUp=1",
  })
}
const mtRedData = ref() //美团
const elmRedData = ref() //饿了么
const jdRedData = ref() //京东
const getToRedPage = (shopType) => {
  mtRedData.value = commonInfoStore.reward ? commonInfoStore.reward.popup[0].path : []
  elmRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[0].path : []
  console.log("getToRedPage", commonInfoStore.reward)
  console.log("getToRedPage", mtRedData.value)
  console.log("getToRedPage", elmRedData.value)
  return mtRedData.value
}
// 允许跳转领红包
const doMeiTuanAndQiangDan = async () => {
  resShow.value = false
  console.log("进入小程序==", commonInfoStore.reward.order[1])
  mtRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[0] : []
  elmRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[1] : []
  jdRedData.value = commonInfoStore.reward ? commonInfoStore.reward.order[2] : []
  //await toMiniAppRedPage(shop.value.type === 1 ? mtRedData.value : elmRedData.value )
  await toMiniAppRedPage(shop.value.type === 3 ? jdRedData.value : shop.value.type === 2 ? elmRedData.value : mtRedData.value)
}
const goMeiTuanSearch = async () => {
  showCopy.value = false
  await toMiniAppSearch(shop.value.type)
}

const useUser = useUserInfoStore()
const message = ref("您的好友给你推荐了（店铺名），预计花费 ￥" + takeMoney.value + "元")
const setMoneyShare = () => {
  takeMoney.value = activity_item.value.minimum_amount - activity_item.value.member_rebate_amount
  message.value = "您的好友给你推荐了（" + shop.value?.name + "），预计花费 ￥" + takeMoney.value + "元"
  commonInfoStore.setWxShareMessage("message", message.value, useUser.userInfo?.id);
}

// 转发到聊天界面
onShareAppMessage(() => {
  return commonInfoStore.setWxShareMessage("message", message.value, useUser?.userInfo?.id, "/pages/index/index?parent_id=" + userInfoStore.userInfo?.id + "&type=1&shopId=" + shopID.value + "&source=2", shop.value.logo, 2);
})

// 转发到朋友圈
onShareTimeline(() => {
  return commonInfoStore.setWxShareMessage("friend", message.value, useUser?.userInfo?.id, "/pages/index/index?parent_id=" + userInfoStore.userInfo?.id + "&type=1&shopId=" + shopID.value + "&source=2", shop.value.logo, 2);
})

// 添加到收藏
onAddToFavorites(() => {
  return commonInfoStore.setWxShareMessage("favorite", message.value, useUser?.userInfo?.id, "/pages/index/index?parent_id=" + userInfoStore.userInfo?.id + "&type=1&shopId=" + shopID.value + "&source=2", shop.value.logo, 2);
})

const showShare = ref(false)
const currentIcon = ref("share-fill") //初始图标为分享
const intervalId = ref('') //定时器ID，用于取消定时器
const share = () => {
  console.log('商家ID', shopID.value)
  showShare.value = true
}
const fadeImage = ref()
// 切换图标事件
const startImageCycle = () => {
  if (currentIcon.value === "share-fill"){
    currentIcon.value = "weixin-fill"
  } else {
    currentIcon.value = "share-fill"
  }
}
onMounted(async () => {
  setInterval(() => {
    startImageCycle()
  }, 3000)

})
onUnmounted(() => {
  clearInterval(intervalId.value);
})
// WEIXIN转发到聊天界面onShareAppMessage
/* onShareAppMessage((res) => {
  if (res.from === 'button'){
    //console.log('分享的触发方式=', res)
    return {
      title: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",// 分享的标题
      imageUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png",
      path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "source=2",
      type: 0, // 0=正式服，1=测试服，2=体验版
      success:function(res){
        //成功回调
        console.log("分享成功")
      }
    }
  }
}) */
// WEIXIN转发到朋友圈
const ShareTimeLine = () => {
  orderShareShow.value = true
  showShare.value = false
}
// APP分享到微信好友
const handleShareWechat = () => {
  console.log('店铺名称=', shop.value)
  uni.share({
    provider: "weixin",// 分享到的平台，例如：'weixin', 'qq', 'sinaweibo'等
    scene: "WXSceneSession",// 分享的场景，例如：'WXSceneSession'（会话），'WXSenceTimeline'（朋友圈）等
    type: 5,// 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "source=2",
      webUrl: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "source=2",
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id,// 如果是链接类型，则需要填写链接地址
    title: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",// 分享的标题
    summary: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",// 分享的摘要，仅在type为2时有效
    imageUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}
// APP分享到朋友圈
const handleShareTimeline = () => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneTimeline",
    type: 0,// 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "source=2",
      webUrl: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "source=2",
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id,
    title: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",
    summary: "您的好友给你推荐了（" + shop.value.name + "），预计花费 ￥" + takeMoney.value + "元",
    imageUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}

// H5分享
const wxShare = async () => {
  await commonInfoStore.initJSDKConfig(false)
  console.log(`weqweqweqwe`)
  jweixin.ready(() => {
    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    jweixin.updateAppMessageShareData({
      title: '领食周边购', // 分享标题
      desc: "本地优惠，就在领食", // 分享描述
      type: 2,
      // link: BaseURL + "/#/?parent_id=" + userInfoStore.userInfo.id + "&applet=1", // 分享链接
      link: BaseURL + "/#/?parent_id=" + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "&source=2" + "&applet=1", // 分享链接
      imgUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png", // 分享图标
    });
    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    jweixin.updateTimelineShareData({
      title: '领食周边购', // 分享标题
      link: BaseURL + "/#/?parent_id=" + userInfoStore.userInfo.id + "&type=1&shopId=" + shopID.value + "&source=2" + "&applet=1", // 分享链接
      imgUrl: shop.value.logo || BaseImgUrl + "/share/share_bg.png", // 分享图标
    });
  })
  jweixin.error((res) => {
    console.log(res)
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    // getSignature()
  })
}
const h5Share = async () => {
  // #ifdef H5
  await wxShare()
  // #endif
  console.log('H5分享',wxShareTip.value)
  wxShareTip.value = true
  showShare.value = false
}
// 关闭H5分享提示
const shareClick = () => {
  wxShareTip.value = false
}
// 关闭微信朋友圈分享提示
const closeOrderShareShow = () => {
  orderShareShow.value = false
}
// 开通VIP
const toVIP = () => {
  uni.navigateTo({url: "/pagesme/vip/vip"});
}
// 邀请好友赢奖励
const toMakeMoney = () => {
  uni.reLaunch({url: '/pages/makemoney/makemoney'})
}
// 加入内部福利群
const toVipGroup = () => {
  uni.navigateTo({url: "/pages/share/vipgroup"});
}
const okBack = () => {
  if (applet.value === 0) {
    uni.navigateBack()
  } else {
    // uni.navigateBack()
    // uni.reLaunch({url: '/pages/index/index?parent_id=' + parent_id.value});
    uni.reLaunch({url: '/pages/index/index'});
  }
}

</script>
<template>
  <view class="shop_detail_bg"></view>
  <u-navbar
      title="店铺详情"
      placeholder
      titleStyle="color:black"
      leftIconColor="#000"
      :bgColor="scHeight>1 ? '#FEAD24' : 'transparent'"
  >
    <template #left>
      <view class="content" @click="okBack">
        <u-icon v-if="applet === 0" name="arrow-left" color="#3d3d3d" size="20"></u-icon>
        <u-icon v-else name="home" color="#3d3d3d" size="26"></u-icon>
      </view>
    </template>

    <!-- #ifdef APP-PLUS || H5 -->
    <!--<template #right>
      <view class="top_share_box" style="padding: 10rpx" @click="share" >
        <view class="tishi_box"><text class="tishi_text">分享奖8元</text><view class="sjx"></view></view>
        <u-icon class="share_icon" :name="currentIcon" size="26" color="#0CBB2F"></u-icon>
      </view>
    </template>-->
    <!-- #endif -->
  </u-navbar>
  <u-loading-page :loading="!shopDetailLoading" icon-size="28" loading-mode="circle"
                  loading-text="店铺加载中"></u-loading-page>
  <view v-if="shopDetailLoading" class="shop_big_box">
    <!--<view class="top_bg">
      <image :src="BaseImgUrl + '/home/shop_details_top_bg.png'" mode="widthFix"></image>
    </view>-->
    <!-- 店铺信息 -->
    <view class="shops_list" v-if="shop?.name">
      <view class="shop_list_item">
        <view class="shop_info">
          <view class="shop_mingzi">
            <view class="shop_name">{{ shop?.name }}</view>
            <view class="shop_addres">{{ shop.address }}  |  距你{{ shop.distance }}km</view>
          </view>
        </view>
        <view style="position: relative">
          <image v-if="shop?.logo" :src="shop.logo" style="background-color: #F6F6F6;width: 130rpx;height: 130rpx;border-radius: 20rpx;margin-left: 20rpx;"></image>
          <image v-else
                 src="https://img.alicdn.com/imgextra/i3/3829152210/O1CN01gKAL671SCE3PjsESI_!!3829152210.png"
                 style="border-radius: 20rpx;width: 130rpx;height: 130rpx;"></image>
          <view class="pt_hot" v-if="shop.is_hot===1">
            <text class="pt_hot_text">品质</text>
          </view>
          <view class="pt_hot" v-if="shop.is_new_shop === 1 && shop.is_hot === 0">
            <text class="pt_hot_text">新店</text>
          </view>
        </view>
      </view>
      <view class="shop_list_info">
        <view class="shop_list_info_warp" style="position: relative">
          <!--气泡提示盒子-->
          <view v-if="newUser == '新用户' && isShowTipsBox" @click="isShowTipsBox = false" class="tips_box">
            <view class="tips_icons">
              <!--<u-icon name="arrow-up-fill" color="#555555" size="14"></u-icon>-->
              <image :src="BaseImgUrl + '/shop/shopdetail/sjx_top_icon.png'" mode="widthFix" style="width: 24rpx;height: 24rpx;"></image>
            </view>
            <view class="tips_text_box">
              <view class="tips_text">
                <view class="tips_text_title">首单实付满<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>返<text style="color: #fd7c22;padding: 0 4rpx;">{{ userInfo.is_member === 0 ? twoFixed(activity_item.rebate_amount) : twoFixed(activity_item.member_rebate_amount)}}</text>后，再得</view>
                <view v-if="userInfo.is_member === 0">
                  <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) > 3"><text style="color: #fd7c22;padding: 0 4rpx;">3元</text>奖励加<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) -3 }}</text>元无门槛红包</text>
                  <text v-else><text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.rebate_amount) }}元</text>奖励</text>
                </view>
                <view v-if="userInfo.is_member === 1">
                  <text v-if="twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) > 3"><text style="color: #fd7c22;padding: 0 4rpx;">3元</text>奖励加<text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) -3 }}元</text>无门槛红包</text>
                  <text v-else><text style="color: #fd7c22;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) - twoFixed(activity_item.member_rebate_amount) }}元</text>奖励</text>
                </view>
              </view>
              <view class="tips_text_close"><u-icon name="close" color="#ffffff" size="18"></u-icon></view>
            </view>
          </view>
          <view v-if="newUser == '新用户'" style="display: flex;align-items: center;">
            <view class="shop_type">新人全额返</view>
            <view class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.minimum_amount) }}</view>
          </view>
          <view v-if="newUser == '老用户'" style="display: flex;align-items: center;">
            <view class="shop_type">返</view>
            <view v-if="userInfo.is_member === 0" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.rebate_amount) }}</view>
            <view v-if="userInfo.is_member === 1" class="place_text">满{{ twoFixed(activity_item.minimum_amount) }}返{{ twoFixed(activity_item.member_rebate_amount) }}</view>
          </view>
          <!--<view v-if="activity_item.comment_type === 1" class="shop_info_warp_type" style="">品鉴星级</view>-->
          <view v-if="activity_item.is_comment === 2" class="activityNum_evaluate" style="">无需评价</view>
          <view v-if="activity_item.comment_type === 3" class="shop_info_warp_type" style="">图文品鉴</view>
          <view v-if="activity_item.comment_type === 4" class="shop_info_warp_type" style="">文字品鉴</view>
          <view v-if="activity_item.is_hot_card === 1" class="activityNum_quality" style="">品质专享</view>

        </view>
        <view class="shop_list_info_warp" style="justify-content: space-between">
          <view @tap="showSelect = true" class="shop_info_warp_left" style="font-size: 22rpx;color: #666666;display: flex;align-items: center;height: 60rpx;">
            <view class="shop_info_warp_left_icon" style="width: 32rpx;height:32rpx;"><image :src="BaseImgUrl + '/shop/shop_detail_icon01.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image></view>
            <view class="shop_info_warp_left_text" style="padding: 0 8rpx;">查看是否可配送</view>
            <view class="shop_info_warp_left_icon"><u-icon name="arrow-right" size="14" color="#666666"></u-icon></view>
          </view>
          <view  @click="commonInfoStore.toKeFu()" class="shop_info_warp_right" style="font-size: 22rpx;color: #666666;display: flex;align-items: center;height: 60rpx;">
            <view class="shop_info_warp_left_icon" style="width: 32rpx;height:32rpx;"><image :src="BaseImgUrl + '/shop/shop_detail_icon02.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image></view>
            <view class="shop_info_warp_left_text" style="padding: 0 8rpx;">店铺进不去？联系客服</view>
            <view class="shop_info_warp_left_icon"><u-icon name="arrow-right" size="14" color="#666666"></u-icon></view>
          </view>
        </view>
      </view>
      <view class="shop_list_info" style="background: #F0FFF2;border-radius: 0 0 20rpx 20rpx;">
        <view class="shop_list_info_warp" style="display: flex;align-items: center; justify-content: center; ">
          <view class="shop_list_info_icon" style="width: 32rpx;height:32rpx;"><image :src="BaseImgUrl + '/shop/shop_detail_icon03.png'" mode="widthFix" style="width: 36rpx;height: 36rpx;"></image></view>
          <view class="shop_list_info_text" style="font-size: 24rpx;color: #2FA82B;">100%真实返现 ● 优惠叠加 ● 品质保证 ● 售后无忧</view>
        </view>
      </view>
      <!--<view class="shifupeisong">
        <view class="icons_box">
          <view class="copy_icon" @tap="onChooseList(2)">复制店铺名</view>
          <view class="ps_icon" style="flex: 1;align-items: center" @tap="showSelect = true">查看可否配送</view>
          <view class="sb_icon" style="flex: 1;align-items: center" @click="commonInfoStore.toKeFu()">
            失败上报
            &lt;!&ndash;<up-button type="primary" :plain="true" :hairline="false" size="mini"
                       icon="https://lsz.lszbg.com/imgs/old/sb_icon.png" color="#00000000">
              <text style="color: #666;font-size: 26rpx;margin-left: 10rpx;margin-top: 2rpx">失败上报
              </text>
            </up-button>
            <up-button
                class="u_btn"
                :plain="true"
                @click="commonInfoStore.toKeFu()"
                type="primary"
                color="#ffff00"
                shape="circle"
                :customStyle="{padding: '6rpx',margin: 0,border:'none'}"
                icon="https://lsz.lszbg.com/imgs/old/sb_icon.png"
                size="mini">
              <text style="color: #666;font-size: 26rpx;margin-left: 10rpx;margin-top: 2rpx">失败上报
              </text>
            </up-button>
            color="#ffffff"&ndash;&gt;
          </view>
        </view>
      </view>-->
    </view>
    <!-- 多个活动 -->
    <view class="actives_box">
      <!--<view class="tabs_t">
        <text v-for="(item, index) in activity" :class="tabIndex === index ? 'cur':''"
              @tap="handleChangeTabs(item, index)"
              :key="item.id">活动{{ index + 1 }}
        </text>
      </view>-->
      <view class="actives_title">
        <view class="actives_title_text">
          <text class="actives_title_text_t" style="font-size: 30rpx;color: #333333;">返现活动要求</text>
          <text class="actives_title_text_b" style="font-size: 24rpx;color: #CECECE;padding-left: 20rpx;">先抢名额后下单</text>
        </view>
        <view class="actives-line">
          <view class="actives-line-l"></view>
          <view class="actives-line-c"><u-line color="#E1E1E1" :dashed="true"></u-line></view>
          <view class="actives-line-r"></view>
        </view>
      </view>
      <view class="actives_content">
        <view class="actives_content_item">
          <view class="actives_item_left">平台</view>
          <view class="actives_item_right">
            <view class="actives_item_icon">
              <image v-if="shop.type === 1" :src="BaseImgUrl + '/shop/shop_meituan.png'" mode="widthFix" style="width: 100%;"></image>
              <image v-else-if="shop.type === 2" :src="BaseImgUrl + '/shop/shop_ele.png'" mode="widthFix" style="width: 100%;"></image>
              <image v-else-if="shop.type === 3" :src="BaseImgUrl + '/shop/shop_jd.png'" mode="widthFix" style="width: 100%;"></image>
            </view>
            <text class="actives_item_text" style="margin-right: 10rpx;">{{ shop.type === 1 ? '美团' : shop.type === 2 ? '饿了么' : '京东'}}</text>
            <text class="actives_item_text">剩余名额</text>
            <text class="actives_item_text" style="color: #FE7B21;padding: 0 6rpx;">{{ activity_item.day_num - activity_item.total_count }}</text>
            <text class="actives_item_text">份</text>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left">返利</view>
          <view class="actives_item_right">
            <view class="actives_item_icon">
              <image v-if="userInfo.is_member === 1" :src="BaseImgUrl + '/shop/shop_detail_icon04.png'" mode="widthFix" style="width: 100%;"></image>
              <image v-else :src="BaseImgUrl + '/shop/shop_detail_icon05.png'" mode="widthFix" style="width: 100%;"></image>
            </view>
            <text v-if="userInfo.is_member === 0" class="actives_item_text">{{ shop.unvip_msg }}</text>
            <text v-if="userInfo.is_member === 1" class="actives_item_text">您是会员用户</text>
            <view v-if="userInfo.is_member === 0" @click="toVIP" class="actives_open_member">立即开通</view>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left" style="width: 60rpx;"></view>
          <view class="actives_item_right" style="color: #333333;">
            <text class="actives_item_text">本单外卖实付满</text>
            <text class="actives_item_text" style="color: #FE7B21;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>
            <text class="actives_item_text">返</text>
            <view v-if="userInfo.is_member === 0">
              <text v-if="newUser == '新用户'" class="actives_item_text" style="color: #FE7B21;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>
              <text v-if="newUser == '老用户'" class="actives_item_text" style="color: #FE7B21;padding: 0 4rpx;">{{ twoFixed(activity_item.rebate_amount) }}</text>
            </view>
            <view v-if="userInfo.is_member === 1">
              <text v-if="newUser == '新用户'" class="actives_item_text" style="color: #FE7B21;padding: 0 4rpx;">{{ twoFixed(activity_item.minimum_amount) }}</text>
              <text v-if="newUser == '老用户'" class="actives_item_text" style="color: #FE7B21;padding: 0 4rpx;">{{ twoFixed(activity_item.member_rebate_amount) }}</text>
            </view>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left">要求</view>
          <view class="actives_item_right">
            <text class="actives_item_text">{{ activity_item.activity_ask }}</text>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left">限购</view>
          <view class="actives_item_right">
            <text class="actives_item_text">每单最多包含一瓶酒水，饮品店/超市除外</text>
          </view>
        </view>
        <view class="actives_content_item">
          <view class="actives_item_left">其他</view>
          <view class="actives_item_right">
            <text class="actives_item_text">实付金额仅计算商家餐食+配送费实付，发生退款或 理赔本活动无效</text>
          </view>
        </view>
        <!--<view style="font-size: 26rpx;color: #888888;margin: 20rpx 0;">本次活动需消耗</view>-->
        <view class="coupon_box">
          <quan :shopID="shopID" :is-red="activity_item.is_hot_card===0" :is-p-z="activity_item.is_hot_card===1"
                v-model:red_id="red_id" v-model:card_id="card_id"></quan>
          <!--<view class="coupon_box_left">
            <view class="coupon_box_left_img">
              <image :src="BaseImgUrl + '/shop/shop_detail_icon06.png'" mode="widthFix" style="width: 100%;"></image>
            </view>
            <view class="coupon_box_left_text">
              <text class="coupon_box_left_text_t">卡券红包剩余</text>
              <text class="actives_item_text" style="color: #FE7B21;">0</text>
              <text class="coupon_box_left_text_t">张</text>
            </view>
          </view>
          <view class="coupon_box_right">
            <text class="coupon_box_left_text_t">去</text>
            <text class="actives_item_text" style="color: #FE7B21;">抽奖</text>
            <text class="coupon_box_left_text_t">得红包卡券</text>
            <u-icon name="arrow-right" size="14" color="#C1C1C1"></u-icon>
          </view>-->
        </view>
      </view>
      <!--<view class="change_box" v-if="activity_item">
        &lt;!&ndash; 活动 &ndash;&gt;
        <view class="small_box">
          <view class="text_t fs_icon">份数：</view>
          <view class="bl_box">
            <view class="u-line-progress">
              <view class="progress" :style="'width:'+activity_item.percent+'%'"></view>
            </view>
            <text class="val_num" style="color: #000;width: 80px;">剩余
              <text style="color: #FBA243;font-weight: bold;">{{ activity_item.percent }}%</text>
            </text>
            <view class="end_text">
              (
              <u-count-down style="color: #dd524d" :time="begin[0]"
                            v-if="begin[1] !== 3 && !isSellOut"
                            format=" HH : mm : ss " autoStart :customStyle="{padding: '5rpx 20rpx'}">
              </u-count-down>
              <text style="margin-left: 10rpx">{{
                  isSellOut ? "已售罄" :
                      begin[1] === 1 ? '后结束' : begin[1] === 2 ? '后开始' : '活动已结束'
                }})
              </text>
            </view>
          </view>
        </view>
        &lt;!&ndash; 规则 &ndash;&gt;
        <view class="small_box" style="align-items: flex-start;">
          <view class="text_t yq_icon">要求：</view>
          <text class="val_text">{{ activity_item.activity_ask }}</text>
        </view>
        &lt;!&ndash; 补贴 &ndash;&gt;
        <view class="small_box">
          <view class="text_t bt_icon">补贴：</view>
          &lt;!&ndash;<view class="price_text">&ndash;&gt;
          &lt;!&ndash;  <text>￥</text>&ndash;&gt;
          &lt;!&ndash;  {{ activity_item['member_rebate_amount'].split('.')[0] }}&ndash;&gt;
          &lt;!&ndash;</view>&ndash;&gt;
          <view>
            <view class="vip_text" v-if="activity_item.minimum_amount>0">会员满
              <text>{{ activity_item.minimum_amount }}</text>
              &nbsp;返&nbsp;
              <text>{{ activity_item['member_rebate_amount'] }}</text>
            </view>
            <view class="vip_text" v-if="activity_item.minimum_amount>0">非会员满
              <text>{{ activity_item.minimum_amount }}</text>
              &nbsp;返&nbsp;
              <text>{{ activity_item['rebate_amount'] }}</text>
            </view>
            <view class="vip_text" v-if="activity_item.minimum_amount<=0">会员最高返
              <text>{{ activity_item['member_rebate_amount'] }}</text>
            </view>
            <view class="vip_text" v-if="activity_item.minimum_amount<=0">非会员最高返
              <text>{{ activity_item['rebate_amount'] }}</text>
            </view>
          </view>
        </view>
        <view>
          <quan :shopID="shopID" :is-red="activity_item.is_hot_card===0" :is-p-z="activity_item.is_hot_card===1"
                v-model:red_id="red_id" v-model:card_id="card_id"></quan>
        </view>
      </view>-->
    </view>
    <!-- 店铺热卖 -->
    <view v-if="shop?.othergoods" class="shop_hot_box">
      <othergoods :goods="shop?.othergoods"></othergoods>
    </view>
    <!-- 会员福利 -->
    <view class="shop_vip_box">
      <view class="shop_vip_left">
        <view class="vip_title">免费激活会员</view>
        <view class="vip_subTitle">每月饭钱<text style="color: #FD6801">省300元</text></view>
        <view v-if="userInfo.is_member !== 1" @click="toVIP" class="vip_btn">立即开通</view>
        <view v-if="userInfo.is_member === 1" @click="goVip" class="vip_btn">去升级</view>
        <view class="vip_icon"><image :src="BaseImgUrl + '/shop/shop_detail_img01.png'" mode="widthFix" style="width: 100%;"></image></view>
      </view>
      <view class="shop_vip_right">
        <view @click="toMakeMoney" class="shop_vip_right_item shop_vip_top">
          <view class="vip_title">邀请好友赚奖金</view>
          <view class="vip_subTitle">至多可得<text style="color: #FD6801">245元</text></view>
          <view class="vip_icon"><image :src="BaseImgUrl + '/shop/shop_detail_img02.png'" mode="widthFix" style="width: 100%;"></image></view>
        </view>
        <view @click="toVipGroup" class="shop_vip_right_item shop_vip_bottom">
          <view class="vip_title">加内部福利群</view>
          <view class="vip_subTitle">每月<text style="color: #FD6801">福利领不停</text></view>
          <view class="vip_icon"><image :src="BaseImgUrl + '/shop/shop_detail_img03.png'" mode="widthFix" style="width: 100%;"></image></view>
        </view>
      </view>
    </view>
    <!-- 粉丝群 -->
    <!--<vip_qun :is-mei-tuan="false"></vip_qun>-->
    <!--    <view class="fensiqun_box">
          <image :src="BaseImgUrl + '/home/qunicon.png'"></image>
          <view class="qun_info">
            <view>粉丝专属福利群</view>
            <view>进群即可
              <text>领券</text>
              享群
              <text>专属优惠</text>
            </view>
          </view>
          <view class="lijinqun" @click="jinqun()">
            立即进群
          </view>
        </view>
     VIP
        <view class="lingshi_vip" @tap="goVip">
          <image class="vip_bg" :src="BaseImgUrl + '/home/vip_bg.png'" mode="widthFix"></image>
          <view class="vip_info_box">
            <view class="vip_title">领食VIP</view>
            <view class="vip_ifno">
              <view>开通会员预计省￥10</view>
              <view>每月多省￥300</view>
            </view>
            <view class="vip_kaitong">立即开通</view>
          </view>
        </view>-->
    <!-- 活动须知 -->
    <view class="shop_activity_must">
      <view class="shop_activity_top" style="height:30rpx;"></view>
      <view class="shop_activity_title">活动须知</view>
      <view class="shop_activity_content">
        <u-parse :content="activity_rules" style="color: #3D3D3D;"></u-parse>
        <!--          <view v-for="(item, index) in activity_rules" :key="index">-->
        <!--            {{ item }}-->
        <!--          </view>-->
      </view>
    </view>
  </view>
  <!-- 客服 -->
  <view v-if="shopDetailLoading" class="kefu_icon">
    <view
        @click="commonInfoStore.toKeFu()">
      <image :src="BaseImgUrl + '/home/kefu_icon.png'" mode="widthFix" style="width: 98rpx;height: 98rpx;"></image>
    </view>
  </view>
  <!--分享按钮-->
  <view class="share_detail_box">
    <view class="share_icon" @click="share">
      <image :src="BaseImgUrl + '/share/shopdetail_share_icon01.png'" mode="widthFix" style="width: 120rpx;height: 120rpx"></image>
    </view>
  </view>
  <!-- 底部 -->
  <view v-if="shopDetailLoading" class="bottomBar">
    <!-- #ifdef H5 -->
    <lszbg-dowload></lszbg-dowload>
    <!-- #endif -->
    <!--报名流程-->
    <view class="regist_box">
      <view class="regist_item" style="width: 180rpx;">
        <view class="regist_item_icon"><image :src="BaseImgUrl + '/shop/shop_detail_icon07.png'" mode="widthFix" style="width: 100%"></image></view>
        <view class="regist_title">报名活动</view>
      </view>
      <view class="regist_icon">
        <image :src="BaseImgUrl + '/shop/shop_detail_icon10.png'" mode="widthFix" style="width: 100%"></image>
      </view>
      <view class="regist_item" style="width: 190rpx;">
        <view class="regist_item_icon">
          <image v-if="shop.type === 1" :src="BaseImgUrl + '/shop/shop_meituan.png'" mode="widthFix" style="width: 100%;"></image>
          <image v-else-if="shop.type === 2" :src="BaseImgUrl + '/shop/shop_ele.png'" mode="widthFix" style="width: 100%;"></image>
          <image v-else-if="shop.type === 3" :src="BaseImgUrl + '/shop/shop_jd.png'" mode="widthFix" style="width: 100%;"></image>
        </view>
        <view class="regist_title">
          去
          <text class="actives_item_text">{{ shop.type === 1 ? '美团' : shop.type === 2 ? '饿了么' : '京东'}}</text>
          下单</view>
      </view>
      <view class="regist_icon">
        <image :src="BaseImgUrl + '/shop/shop_detail_icon10.png'" mode="widthFix" style="width: 100%"></image>
      </view>
      <view class="regist_item" style="width: calc(100% - 480rpx)">
        <view class="regist_item_icon"><image :src="BaseImgUrl + '/shop/shop_detail_icon09.png'" mode="widthFix" style="width: 100%"></image></view>
        <view class="regist_title">回领食返利提现</view>
      </view>
    </view>
    <view class="bottom-btn-zu" v-if="shop?.type">
      <view class="btn-zu3" v-if="isSellOut && shop.orderInfo ==''" style="margin-right: 20rpx;">已售罄</view>
      <!--<view class="btn-zuwrap" v-else>

      </view>-->
      <view class="btn-zu1" v-if="isSellTime && shop.orderInfo==''" @tap="tiaoZhuanMT(shop.id, activity_item.id)">只报名</view>
      <view class="btn-zu1" v-if="shop.orderInfo !='' && shop.orderInfo.status === 0 && shop.orderInfo.check_status >= 0 && shop.orderInfo.is_cancel === 0" @tap="cancelOrder(shop.orderInfo.id)">取消报名</view>
      <!--<view class="btn-zu1" v-if="shop.orderInfo !='' && shop.orderInfo.status === 0 && shop.orderInfo.check_status >= 1 && shop.orderInfo.is_cancel === 0" @tap="cancelOrder(shop.orderInfo.id)">取消订单</view>-->
      <view class="btn-zu3" v-else-if="!isSellTime" style="padding-right: 28rpx;padding-left: 28rpx;font-size: 24rpx">
        活动未开始或已结束
      </view>
      <view :class="shop.type === 1 || shop.type === 3? 'btn-zu2':'btn-zuelm'" @tap="tiaoZhuanMTRed()"
            v-if="!isSellOut && isSellTime && checkActivityIsOrder.is_order === 1 && isSellTime && shop.orderInfo==''">
        领红包并立即报名
        <view class="tishi_text">
          <view class="tishi_t">领红包多省3-9元并免审</view>
          <view class="tishi_bg"><image :src="BaseImgUrl + '/shop/shop_detail_icon11.png'" mode="widthFix" style="width: 100%;"></image></view>
        </view>
      </view>
      <view :class="shop.type === 1 || shop.type === 3? 'btn-zu2':'btn-zuelm'" @tap="goShop()"
            v-if="shop.orderInfo !='' && shop.orderInfo.status === 0 && shop.orderInfo.check_status >= 0 && shop.orderInfo.is_cancel === 0">
        进店下单
      </view>
    </view>
  </view>

  <!-- #ifdef H5 -->
  <!--微信H5分享指示图-->
  <view class="share_box_shadow" v-if="wxShareTip" @click="shareClick">
    <image mode="widthFix" :src="BaseImgUrl + '/images/share_line.png'"></image>
  </view>
  <!-- #endif -->
  <!--微信朋友圈分享-->
  <view class="share_box_shadow" v-if="orderShareShow" @click="closeOrderShareShow">
    <image mode="widthFix" :src="BaseImgUrl + '/images/share_line.png'"></image>
  </view>
  <!--分享按钮弹窗-->
  <up-popup :show="showShare" mode="bottom" @close="showShare = false" closeable round="10">
    <view class="share_box">
      <view class="share_top">
        <view class="share_top_bg"><image :src="BaseImgUrl + '/share/share_top_bg.png'" mode="widthFix" style="width: 100%;"></image></view>
        <view class="share_top_warp">
          <view class="share_top_warp_title">分享店铺 赚现金奖励</view>
          <view class="share_top_warp_subtitle">每邀请 <text style="color: #FF3230">1</text> 位好友下单，你最少可获得 <text style="color: #FF3230">3元</text> 现金奖励</view>
          <view class="share_top_warp_content">
            <view class="share_top_warp_content_item">
              <view style="position: relative;margin-top: 30rpx;color:#FA642B;min-height: 268rpx">
                <image :src="BaseImgUrl + '/share/yqjl@2x.png'"
                       style="width: 650rpx;height: 268rpx;position: absolute"></image>
                <view class="u-flex" style="position: relative;justify-content: flex-start;align-items: flex-start">
                  <view style="text-align: center;flex: 1;margin-top: 20rpx">
                    <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                      ￥
                      <text style="font-size: 48rpx">3</text>
                    </view>
                    <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                      邀请1人
                    </view>
                  </view>
                  <view style="text-align: center;flex: 1;margin-top: 20rpx">
                    <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                      ￥
                      <text style="font-size: 48rpx">5</text>
                    </view>
                    <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                      邀请2-5人
                    </view>
                  </view>
                  <view style="text-align: center;flex: 1;margin-top: 20rpx">
                    <view style="font-size: 28rpx;margin-top: 20rpx;font-weight: bold;">
                      ￥
                      <text style="font-size: 48rpx">8</text>
                    </view>
                    <view style="font-size: 26rpx;margin-top: 10rpx;text-align: center;margin-left: 10rpx">
                      邀请≥6人
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="wechat_box">
        <!-- #ifdef MP -->
        <view class="small_box">
          <button class="complete1" open-type="share">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
            </view>
            <view class="name">微信好友</view>
          </button>
        </view>
        <view class="small_box" @click="ShareTimeLine()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
          </view>
          <view class="name">朋友圈</view>
        </view>
        <view class="small_box">
          <button class="complete1" open-type="share">
            <view class="icon">
              <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
            </view>
            <view class="name">分享链接</view>
          </button>
        </view>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <view class="small_box" @click="handleShareWechat()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
          </view>
          <view class="name">微信好友</view>
        </view>
        <view class="small_box" @click="handleShareTimeline()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
          </view>
          <view class="name">朋友圈</view>
        </view>
        <!--<view class="small_box" @click="handleSavePhoto()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/upload_icon.png'"></image>
          </view>
          <view class="name">保存图片</view>
        </view>-->
        <view class="small_box" @click="handleShareWechat()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
          </view>
          <view class="name">分享链接</view>
        </view>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view class="small_box" @click="h5Share()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/wechat_icon.png'"></image>
          </view>
          <view class="name">微信好友</view>
        </view>
        <view class="small_box" @click="h5Share()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/pyq_icon.png'"></image>
          </view>
          <view class="name">朋友圈</view>
        </view>
        <view class="small_box" @click="h5Share()">
          <view class="icon">
            <image :src="BaseImgUrl + '/group/share_icon.png'"></image>
          </view>
          <view class="name">分享链接</view>
        </view>
        <!-- #endif -->
      </view>
    </view>
    <view style="padding-bottom: env(safe-area-inset-bottom);"></view>
  </up-popup>
  <!-- 复制店名须知 -->
  <u-popup :show="copyShow" mode="center" :safeAreaInsetBottom="false" round="10" closeable @close="copyShow = false">
    <view class="wm_box">
      <view class="content_boxs">
        <view class="know_t">复制店名须知</view>
        <view class="desc_text">
          店名复制成功，搜索下单时请仔细核对
          <text>商家名称</text>
          及
          <text>店铺地址</text>
          和
          <text>下单平台</text>
          ，避免同名店铺导致下错单给您带来无法获得补贴的影响。
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;">
          <view class="btns_box" @tap="copyShow=false">
            我知道了
          </view>
        </view>
      </view>
    </view>
  </u-popup>
  <!-- 领红包跳转通知 -->
  <u-popup :show="resShow" mode="center" :round="10" width="70%" closeable @close="closeNoticePop()">
    <view class="wm_box">
      <view class="content_boxs">
        <!-- <view class="know_t">提示</view> -->
        <view class="desc_text" style="text-align: center;margin: 40rpx 0;">
          <u-parse :content="shop?.success_notice[0]"></u-parse>
          <text v-if="!isH5">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;position: relative">
          <!-- #ifdef APP-PLUS || MP-->
          <button class="btns_box" @click="doMeiTuanAndQiangDan()">允许{{ count }}s</button>
          <!-- #endif -->
          <!-- #ifdef H5 -->
          <view class="btns_box">
            允许
            <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                  :username="shop.type === 1 ? commonInfoStore.reward.order[0].original_id : shop.type === 2 ? commonInfoStore.reward.order[1].original_id : commonInfoStore.reward.order[2].original_id"
                                  :path="shop.type === 1 ? commonInfoStore.reward.order[0].path: shop.type === 1 ? commonInfoStore.reward.order[1].path : commonInfoStore.reward.order[1].path"
                                  style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
              <component :is="'script'" type='text/wxtag-template' style="display: block;">
                <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
              </component>
            </wx-open-launch-weapp>
          </view>
          <!-- #endif -->
        </view>
      </view>
    </view>
  </u-popup>
  <!-- 抢单须知 -->
  <u-popup :show="knowshow" mode="center" :round="10" width="80%" closeable @close="closeNoticePop()">
    <view class="wm_box">
      <view class="content_boxs">
        <view class="know_t">抢单须知</view>
        <view class="desc_text">
          <u-parse :content="shop?.success_notice[1]"></u-parse>
          <text v-if="!isH5">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;position: relative">
          <view>
            <!-- #ifdef APP-PLUS || MP-->
            <button class="btns_box" @click="goShop()">去商家下单{{ count }}s</button>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view class="btns_box">
              去商家下单
              <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                    :username="getBuToPagePath(shop.type)"
                                    :path="shop.path"
                                    style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
            </view>
            <!-- #endif -->
          </view>
        </view>
      </view>
    </view>
  </u-popup>
  <!-- 是否可配送 -->
  <u-popup :show="showSelect" :round="10" mode="bottom" @close="showSelect = false" closeable>
    <view class="box-content">
      <view class="box-title">
        请选择进店方式
      </view>
      <view>
        <view
            class="box-item"
            v-for="(item, index) in chooseList"
            :key="index"
            @click="onChooseList(index)"
            style="position: relative"
        >
          <View class="icon-content1">
            <u-icon
                :name="item.icon"
                size="22"
            ></u-icon>
          </View>
          <view class="box-item-content-name">
            <text>{{ item.name }}</text>
            <text v-if="index===0" class="to-shop">直接进店</text>
          </view>
          <View class="icon-content">
            <u-icon
                name="arrow-right"
                size="18"
            ></u-icon>
          </View>
          <!-- #ifdef H5 -->
          <wx-open-launch-weapp id="launch-btn" v-if="index===0" @launch="handleLaunch" @error="handleError"
                                :username="getBuToPagePath(shop.type ? shop.type : 1)"
                                :path="shop.path ? shop.path : ''"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <!-- #endif -->
        </view>
      </view>
      <view style="height: 20rpx"></view>
    </view>
  </u-popup>
  <!-- 二维码进店 -->
  <u-popup :show="showEwm" :round="20" mode="center">
    <view class="ewm-content">
      <image class="top-img" :src="shop?.logo" mode="scaleToFill"></image>
      <view class="erm-content">
        <view class="erm-content-name">
          {{ shop?.name }}
        </view>

        <view class="line"></view>
        <view class="erm-content-bottom">
          <view class="right">
            <view>
              长按右侧小程序二维码
            </view>
            <view style="height: 10rpx;"></view>
            <view>
              访问该店铺
            </view>
          </view>
          <view class="left">
            <image class="mini-img" :src="shop?.miniProgram_code" show-menu-by-longpress></image>
          </view>
        </view>
      </view>
      <View class="icon-content" @click="showEwm = false">
        <u-icon @click="showEwm = false"
                name="close"
                size="18"
        ></u-icon>
      </View>
    </view>
  </u-popup>
  <!-- 复制进店 -->
  <u-popup :show="showCopy" :round="10" mode="center" @close="closePop()" closeable :safeAreaInsetBottom="false">
    <view class="copy-content">
      <view class="top">
        <image class="top-img" :src="shop?.logo" mode="scaleToFill"></image>
        <view class="copy-content-center">
          <view class="copy-content-name">
            {{ shop?.name }}
          </view>
          <view class="vip-content">
            <text class="vip_text" v-if="activity_item?.minimum_amount>0">会员满
              <text>{{ activity_item.minimum_amount.split('.')[0] }}</text>
              返
              <text>{{ activity_item['member_rebate_amount'].split('.')[0] }}</text>
            </text>
            <text class="vip_text" v-if="activity_item?.minimum_amount>0">非会员满
              <text>{{ activity_item.minimum_amount.split('.')[0] }}</text>
              返
              <text>{{ activity_item['rebate_amount'].split('.')[0] }}</text>
            </text>
            <text class="vip_text" v-if="activity_item?.minimum_amount<=0">会员最高返
              <text>{{ activity_item['member_rebate_amount'].split('.')[0] }}</text>
            </text>
            <text class="vip_text" v-if="activity_item?.minimum_amount<=0">非会员最高返
              <text>{{ activity_item['rebate_amount'].split('.')[0] }}</text>
            </text>
          </view>
          <view class="address">
            {{ shop?.address }}
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="desc_text">
          店名复制成功，即将跳转去搜索，搜索下单时
          <text>请仔细核对商家名称及店铺地址和下单平台</text>
          ，
          <text>避免同名店铺</text>
          导致下错单给您带来无法获得补贴的影响。
          <text v-if="!isH5">{{ count }}s后自动跳转</text>
        </view>
        <view class="btns_con" style="display: flex;justify-content: space-around;margin: 30rpx 0;position: relative">
          <view>
            <!-- #ifdef APP-PLUS || MP-->
            <button class="btns_box1" @click="goMeiTuanSearch()">好，去搜索下单{{ count }}s</button>
            <!-- #endif -->
            <!-- #ifdef H5 -->
            <view class="btns_box1">
              好，去搜索下单
              <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                    :username="getToPagePath(shop.order_type == 2 ? 1 : shop.type)[0]"
                                    :path="getToPagePath(shop.order_type == 2 ? 1 : shop.type)[1]"
                                    style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity: 0.01;background-color: #ff531a">
                <component :is="'script'" type='text/wxtag-template' style="display: block;">
                  <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
                </component>
              </wx-open-launch-weapp>
            </view>
            <!-- #endif -->
          </view>
        </view>
        <!-- #ifdef APP-PLUS || MP-->
        <view class="box-item" @click="onClickIsNoShow()">
          <View class="icon-content1">
            <u-icon
                v-if="isNoShow"
                name="checkmark-circle-fill"
                color="#FC754A"
                size="18"
            ></u-icon>
            <u-icon
                v-else
                name="checkmark-circle-fill"
                color="#DDDDDD"
                size="18"
            ></u-icon>
          </View>
          <view class="box-item-content-name">
            <text>下次不再提示，直接复制</text>
          </view>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </u-popup>
  <!-- 抢单提示 -->
  <u-popup :show="qdTip" :round="10" mode="center" @close="qdTip = false" :safeAreaInsetBottom="false">
    <view class="qd-content" v-if="shop?.activityRule">
      <view class="title">
        抢单说明
      </view>
      <view v-for="(item, index) in shop.activityRule" :key="index">
        <view class="tip" :class="index === shop.activityRule.length-1 ? 'tip1' : ''">
          {{ item }}
        </view>
      </view>
      <view class="btns_con">
        <view style="flex: 1"></view>
        <button class="zbbm" @click="qdTip = false">暂不报名</button>
        <button class="submit" @click="qdTip = false;qdType===0?tiaoZhuanMT():tiaoZhuanMTRed()">确定报名</button>
      </view>
    </view>
  </u-popup>
  <up-popup :show="distance" :round="10" mode="center" @close="distance = false" :safeAreaInsetBottom="false">
    <view class="qd-content" v-if="shop?.activityRule">
      <view class="title">
        温馨提示
      </view>
      <view class="tip" style="line-height: 68rpx;font-size: 26rpx">
        该店铺距离您超过5km，可能影响配送，可先进店查看可否配送后再抢单报名
      </view>
      <view class="btns_con">
        <view style="flex: 1"></view>
        <button class="zbbm" @click="distance = false">我知道了</button>
        <!-- #ifdef APP-PLUS || MP-->
        <button class="submit" @click="">进店查看</button>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <view style="position: relative">
          <wx-open-launch-weapp id="launch-btn" @launch="handleLaunch" @error="handleError"
                                :username="getBuToPagePath(shop.order_type == 2 ? 1 : shop.type)"
                                :path="shop.order_type == 2 ? shop.wxPath :shop.path"
                                style="position: absolute;z-index: 2;left: 0;width: 100%;height:100%;opacity:0.01;background-color: #ff531a">
            <component :is="'script'" type='text/wxtag-template' style="display: block;">
              <div style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0"></div>
            </component>
          </wx-open-launch-weapp>
          <button class="submit">进店查看</button>
        </view>
        <!-- #endif -->
      </view>
    </view>
  </up-popup>
</template>
<style lang="scss">
page {
  background-color: #F6F6F6;
  position: relative;
}

.u-count-down {
  &__text {
    color: #ff6512 !important;
    font-size: 26rpx !important;
  }
}

:deep(.uni-button:after) {
  border: none;
}

.u_btn :deep(.uni-button:after) {
  border: none;
}
</style>
<style lang="scss" scoped>
.shop_detail_bg{
  height: 650rpx;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background:linear-gradient( 180deg, #FEAD24 0%, rgba(253,124,30,0) 100%);
}
/* 头部分享css */
.top_share_box{
  position: relative;
  z-index: 10;
  & .tishi_box {
    width: 170rpx;
    height: 36rpx;
    box-sizing: border-box;
    position: absolute;
    top: 18rpx;
    left: -150rpx;
    font-size: 22rpx;
    display: flex;
    .tishi_text{
      width: 130rpx;
      height: 36rpx;
      line-height: 36rpx;
      padding: 0 10rpx;
      color: #fff;
      background-color: #FC754A;
      border: 1px solid #fff;
      border-radius: 10rpx 0 0 10rpx;
    }
    .sjx{
      width: 0;
      height: 0;
      border-right: 22rpx solid transparent; /* 左侧边框透明 */
      border-left: 22rpx solid #fff; /* 右侧边框为黑色 */
      border-top: 20rpx solid transparent; /* 上侧边框透明 */
      border-bottom: 20rpx solid transparent; /* 下侧边框透明 */
    }
  }
  .share_icon{
    transition: fadeInOut 3s ease-in-out; /* 渐变效果 */
    opacity: 1;
  }
  @keyframes fadeInOut {
    0%{ opacity: 0; }
  }
}

.copy-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .bottom {
    .btns_box1 {
      width: 540rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
      border-radius: 50rpx;
      font-size: 26rpx;
      color: #fff;
      line-height: 80rpx;
      text-align: center;
    }

    .box-item {
      display: flex;
      font-size: 28rpx;
      align-items: center;
      width: 370rpx;
      margin: 0 auto 38rpx;
      color: #B1B1B1;
      border-radius: 16rpx;
      text-align: center;

      .icon-content1 {
        border-radius: 50%;
        padding: 6rpx;
        background: #F8F8F8;
      }

      .box-item-content-name {
        margin-left: 10rpx;
      }
    }
  }

  .top {
    background: #f8f8f8;
    border-radius: 20rpx;
    padding: 0 30rpx 30rpx;
  }

  .top-img {
    height: 200rpx;
    width: 200rpx;
    margin: 60rpx auto auto;
    border-radius: 30rpx;
  }

  .address {
    color: #888888;
    margin-top: 20rpx;
    font-size: 26rpx;
  }

  .copy-content-center {
    .copy-content-name {
      padding: 30rpx 0 20rpx;
      font-size: 32rpx;
      font-weight: 600;
    }

    .vip-content {
      text-align: center;

      .vip_text {
        font-size: 26rpx;
        color: #333;
        font-weight: bold;
        margin-right: 26rpx;

        text {
          color: #FE874B;
        }
      }
    }

  }

}

.ewm-content {
  margin-top: -460rpx;
  width: 600rpx;
  height: 200rpx;
  border-radius: 20rpx 20rpx 0 0;
  background: white;

  .top-img {
    width: 600rpx;
    height: 600rpx;
    border-radius: 20rpx 20rpx 0 0;
  }

  .erm-content {
    background: white;
    border-radius: 0 0 20rpx 20rpx;

    .erm-content-name {
      background: white;
      padding: 30rpx;
      font-size: 32rpx;
      font-weight: bold;
    }

    .line {
      width: 200rpx;
      background: black;
      height: 2rpx;
      margin: 0 30rpx;
    }

    .erm-content-bottom {
      display: flex;
      font-weight: 600;
      font-size: 28rpx;
      padding: 30rpx;
      align-items: center;

      .right {
        flex: 1;
      }

      .left {
        image {
          width: 180rpx;
          height: 180rpx;
          background: #f8f8f8;
          border-radius: 50%;
        }
      }
    }
  }

  .icon-content {
    text-align: center;
    width: 68rpx;
    padding: 16rpx;
    margin: 50rpx auto auto;
    background: #f2f2f2;
    border-radius: 60rpx;
  }
}

.box-content {
  background: #F8F8F8;
  border-radius: 20rpx 20rpx 0 0;

  .box-title {
    width: 100%;
    height: 130rpx;
    line-height: 130rpx;
    align-items: center;
    text-align: center;
    font-size: 32rpx;
  }

  .box-item {
    display: flex;
    font-size: 32rpx;
    height: 120rpx;
    line-height: 120rpx;
    align-items: center;
    background: #fff;
    border-radius: 16rpx;
    text-align: center;
    margin: 0 30rpx 30rpx 30rpx;
  }

  .box-item-content-name {
    flex: 1;
    text-align: left;
  }

  .to-shop {
    background: #FC4106;
    color: white;
    border-radius: 5rpx;
    font-size: 22rpx;
    margin-left: 10rpx;
    padding: 2rpx 6rpx;
  }

  .icon-content1 {
    border-radius: 50%;
    padding: 10rpx;
    margin: 0 30rpx 0 30rpx;
    background: #F8F8F8;
  }

  .icon-content {
    margin: 0 20rpx;
  }
}
/* 客服css */
.kefu_icon {
  position: fixed;
  right: 5rpx;
  bottom: 300rpx;
  z-index: 1111;

  image {
    width: 98rpx;
  }
}
/* 分享按钮css */
.share_detail_box{
  position: fixed;
  right: 5rpx;
  top: 50%;
  z-index: 1111;
}
.shop_big_box {
  padding-bottom: 250rpx;
  width: 100%;
  height: auto;
  //border-radius: 60rpx 60rpx 0rpx 0rpx;
  overflow: hidden;
  position: relative;
  z-index: 10;
  .top_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;

    image {
      width: 100%;
    }
  }
}
/* 店铺信息 */
.shops_list {
  width: 93%;
  margin: 20rpx auto;
  background-color: #ffffff;
  border-radius: 20rpx;
  z-index: 9;
  position: relative;

  .shifupeisong {
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;
    color: #666;
    font-size: 24rpx;

    .icons_box {
      display: flex;
      justify-content: space-between;

      view {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .copy_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 44rpx;
          height: 44rpx;
          background: url('https://lsz.lszbg.com/imgs/old/copy_icon.png') no-repeat center center / 100% 100%;
          margin-right: 5rpx;
        }
      }

      .ps_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/ps_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          width: 36rpx;
          height: 36rpx;
          background: url('https://lsz.lszbg.com/imgs/old/sb_icon.png') no-repeat center center / 100% 100%;
          margin-right: 10rpx;
        }
      }

      .sb_icon {
        &:before {
          content: '';
          display: inline-block;
          height: 30rpx;
          position: relative;
          top: -5rpx;
        }
      }
    }
  }

  .pijiangonggao {
    display: flex;
    align-items: center;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 45rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .shop_dizhi {
    display: flex;
    align-items: flex-start;
    padding: 30rpx;
    border-top: 1px solid #EEEEEE;

    image {
      width: 56rpx;
      margin-right: 15rpx;
    }

    view {
      color: #999;
    }
  }

  .manjian_box {
    display: flex;
    align-items: center;
    padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx) 30rpx;
    border-top: 1px solid #EEEEEE;
    font-size: 24rpx;

    .man_tag {
      background-color: #F97632;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #ffffff;
      width: 40rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
    }

    view {
      margin-right: 20rpx;
    }

    text {
      color: #FF6433;
    }
  }

  .shop_list_item {
    background-color: #ffffff;
    border-radius: 20rpx 20rpx 0 0;
    padding: 20rpx 20rpx 0;
    display: flex;
    align-items: flex-start;

    .shop_info {
      flex: 1;
      padding-left: 20rpx;
      .shop_name {
        height: 40rpx;
        line-height: 40rpx;
        font-size: 32rpx;
        color: #333333;
        padding: 10rpx 0;
        font-weight: bold;
        flex: 1;
      }
      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
      }
      .adress_shop {
        display: flex;
        margin-top: 20rpx;

        .place_text {
          font-size: 26rpx;
          color: #888;
          flex: 1;
          margin-left: 10rpx;
          line-height: 44rpx;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2; /* 这里是超出几行省略 */
          overflow: hidden;
        }

        .shop_type {
          display: inline-block;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }

        .shop_type3 {
          background-color: #db2727;
          color: #FFFFFF;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 0 6rpx;
          height: 36rpx;
          line-height: 36rpx;
        }

        .elemtag {
          background-color: #17aeff;
          color: #ffffff;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
          position: relative;
          top: 4rpx;
          height: 36rpx;
        }
      }


      .yysjandejuli_box {
        display: flex;
        align-items: center;
        margin: 24rpx 0 0 0;
        font-size: 24rpx;

        .yysj_text {
          background-color: #f1f1f1;
          border-radius: 8rpx;
          padding: 10rpx 6rpx;
          font-size: 20rpx;
          text-align: center;
        }

        .shop_juli {
          color: #555555;
          padding-left: 20rpx;
          font-size: 24rpx;
        }
      }

      .shop_yuliang {
        display: flex;
        align-items: center;

        .jindutiao {
          flex: 1;
        }

        .shengyu {
          padding-left: 20rpx;
          color: #FF6433;
          font-size: 24rpx;
        }
      }
    }
  }

  .shop_list_info{
    padding: 0 30rpx;
    .shop_mingzi {
      margin-bottom: 20rpx;

      .shop_addres{
        font-size: 24rpx;
        color: #888888;
        line-height: 32rpx;
        text-align: left;
      }
    }
    .shop_list_info_warp{
      height: 60rpx;
      display: flex;
      align-items: center;
      .shop_info_warp_type{
        padding: 0 10rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 22rpx;
        color: #FF4444;
        border: 2rpx solid #FF4444;
        border-radius: 6rpx;
        text-align: center;
        margin-left: 10rpx;
      }
      /* 品质专享 */
      .activityNum_quality{
        width: 120rpx;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #FFD11A;
        text-align: center;
        background: linear-gradient( 270deg, #9D561B 0%, #161410 100%);
        border-radius: 8rpx;
        margin-left: 12rpx;
      }
      .activityNum_evaluate{
        height: 36rpx;
        line-height: 36rpx;
        font-size: 22rpx;
        color: #2DB327;
        text-align: center;
        padding: 0 10rpx;
        background: #F5FFF5;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        border: 2rpx solid #74D87F;
        margin-left: 10rpx;
      }
      .shop_type{
        background: #FD7C22;
        color: #FFFFFF;
        font-size: 24rpx;
        // width: 50rpx;
        padding: 0 12rpx;
        height: 44rpx;
        text-align: center;
        line-height: 44rpx;
        border-radius: 6rpx 0 0 6rpx;
      }
      .place_text{
        height: 40rpx;
        line-height: 40rpx;
        padding: 0 12rpx;
        border: 2rpx solid #FD7C22;
        border-radius: 0 6rpx 6rpx 0;
        color: #FD7C22;
        font-size: 22rpx;
        text-align: center;
      }
      /* 气泡提示盒子css */
      .tips_box{
        width: 320rpx;
        position: absolute;
        top: 60rpx;
        left: 0;
        z-index: 10;
        .tips_icons{
          position: absolute;
          left: 14rpx;
          top: -26rpx;
          opacity: 1;
        }
        .tips_text_box{
          padding: 10rpx 20rpx 10rpx 10rpx;
          background-color: rgba(0,0,0,1);
          color: #fff;
          font-size: 22rpx;
          border-radius: 18rpx;
          position: relative;
          .tips_text_title{
            line-height: 34rpx;
          }
          .tips_text_close{
            position: absolute;
            right: 2rpx;
            top: 2rpx;
          }
        }
      }

    }
  }
}
/* 活动css */
.actives_box {
  background-color: #fff;
  width: 93%;
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 auto 20rpx;
  box-sizing: border-box;
  padding: 30rpx;


  .tabs_t {
    box-sizing: border-box;
    padding-bottom: 24rpx;
    border-bottom: 1px solid #eee;

    text {
      font-size: 28rpx;
      color: #999;
      margin-left: 52rpx;
      position: relative;
      box-sizing: border-box;
      padding-bottom: 24rpx;

      &:first-child {
        margin-left: 0;
      }

      &:after {
        content: '';
        display: inline-block;
        width: 36px;
        height: 4px;
        border-radius: 20rpx;
        background-color: #fff;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
      }

      &.cur {
        color: #FE5414;

        &:after {
          background-color: #FE874B;
        }
      }
    }
  }
  .actives_title{
    position: relative;
    height: 80rpx;
    .actives_title_text{
      margin-bottom: 10rpx;
    }
    .actives-line{
      height: 30rpx;
      position: absolute;
      bottom: 0;
      left: -10rpx;
      right: -10rpx;
      & .actives-line-l{
        width: 30rpx;
        height:30rpx;
        background: #f6f6f6;
        border-radius: 50%;
        position: absolute;
        left: -32rpx;
      }
      & .actives-line-c{
        width: 100%;
        position: absolute;
        left: 0rpx;
        right:0rpx;
        top: 15rpx;
      }
      & .actives-line-r{
        width: 30rpx;
        height:30rpx;
        background: #f6f6f6;
        border-radius: 50%;
        position: absolute;
        right: -32rpx;
      }
    }
  }
  .actives_content{
    margin-top: 20rpx;
    .actives_content_item{
      width: 100%;
      min-height: 60rpx;
      display: flex;
      .actives_item_left{
        width: 60rpx;
        line-height: 40rpx;
        font-size: 26rpx;
        color: #888888;
      }
      .actives_item_right{
        width: calc(100% - 60rpx);
        margin-left: 20rpx;
        display: flex;
        font-size: 26rpx;
        color: #333333;
        .actives_item_icon{
          width: 32rpx;
          height: 32rpx;
          margin-top: 6rpx;
          margin-right: 10rpx;
        }
        .actives_item_text{
          line-height: 40rpx;
        }
        .actives_open_member{
          height: 36rpx;
          line-height: 36rpx;
          color: #FFA200;
          border: 2rpx solid #FFA200;
          border-radius: 6rpx;
          padding: 4rpx 10rpx;
          font-size: 24rpx;
          margin-left: 10rpx;
        }
      }
    }
    .coupon_box{
      width: 100%;
      // height: 116rpx;
      .coupon_box_left{
        display: flex;
        align-items: center;
        font-size: 24rpx;
        .coupon_box_left_img{
          width: 32rpx;
          height: 32rpx;
        }
      }
      .coupon_box_right{
        display: flex;
        align-items: center;
        font-size: 24rpx;
      }
    }
  }
  .small_box {
    display: flex;
    box-sizing: border-box;
    padding: 30rpx 0;
    border-bottom: 1px solid #eee;
    align-items: center;

    .text_t {
      font-size: 28rpx;
      color: #888;
      font-weight: bold;
      display: flex;
      align-items: center;
      width: 22%;

      &:before {
        content: '';
        display: inline-block;
        width: 38rpx;
        height: 38rpx;
        margin-right: 10rpx;
      }

      &.fs_icon {
        &:before {
          background: url('https://lsz.lszbg.com/imgs/old/fs_icon.png') no-repeat center center / 100% 100%;
        }
      }

      &.yq_icon {
        &:before {
          background: url('https://lsz.lszbg.com/imgs/old/yq_icon.png') no-repeat center center / 100% 100%;
        }
      }

      &.bt_icon {
        &:before {
          width: 40rpx;
          height: 40rpx;
          background: url('https://lsz.lszbg.com/imgs/old/bt_icon.png') no-repeat center center / 100% 100%;
        }
      }
    }

    .val_text {
      font-size: 26rpx;
      color: #333;
      font-weight: bold;
      flex: 1;
      line-height: 40rpx;
    }

    .price_text {
      font-size: 36rpx;
      color: #FE5414;
      font-weight: bold;
      position: relative;
      top: -3rpx;
      display: flex;
      align-items: center;

      text {
        font-size: 28rpx;
      }
    }

    .vip_text {
      font-size: 26rpx;
      color: #333;
      font-weight: bold;
      margin-right: 26rpx;
      display: flex;
      align-items: center;

      text {
        color: #FE874B;
      }
    }

    .end_text {
      font-size: 24rpx;
      color: #666;
      display: flex;
      align-items: center;
      width: 50%;
    }

    &:last-child {
      border: none;
    }

    .u-line-progress {
      width: 100rpx;
      height: 16rpx;
      border-radius: 100rpx;
      background-color: #FFDECE;
      position: relative;

      .progress {
        width: 50%;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        background-color: #FF8548;
        border-radius: 100rpx;
      }
    }
  }
}
/* 店铺热卖css */
.shop_hot_box{
  background-color: #fff;
  width: 93%;
  border-radius: 10rpx;
  overflow: hidden;
  margin: 0 auto 20rpx;
  box-sizing: border-box;
  padding: 0 30rpx;

}
/* 会员福利css */
.shop_vip_box{
  margin: 0 auto 20rpx;
  width: 93%;
  display: flex;
  .shop_vip_left{
    width: 45%;
    height: 244rpx;
    background: linear-gradient( 314deg, #FDF4AF 0%, #FFFCED 100%);
    border: 4rpx solid #FFFFFF;
    border-radius: 16rpx;
    position: relative;
    .vip_title{
      padding: 30rpx 20rpx 20rpx;
      font-size: 28rpx;
      color: #3D3D3D;
      height: 40rpx;
      line-height: 40rpx;
    }
    .vip_subTitle{
      font-size: 24rpx;
      color: #666;
      padding: 0rpx 20rpx;
    }
    .vip_btn{
      width: 136rpx;
      height: 48rpx;
      line-height: 48rpx;
      text-align: center;
      color: #FFFFFF;
      font-size: 24rpx;
      background: linear-gradient( 270deg, #FFD04E 0%, #FD7C22 100%);
      border-radius: 50rpx;
      position: absolute;
      left: 20rpx;
      bottom: 30rpx;
    }
    .vip_icon{
      width: 140rpx;
      height: 128rpx;
      position: absolute;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
  }
  .shop_vip_right{
    width: 55%;
    height: 250rpx;
    position: relative;
    .shop_vip_right_item{
      border: 4rpx solid #FFFFFF;
      border-radius: 16rpx;
      height: 74rpx;
      position: relative;
      padding: 20rpx;
      .vip_title{
        font-size: 28rpx;
        color: #3D3D3D;
        height: 40rpx;
        line-height: 40rpx;
      }
      .vip_subTitle{
        font-size: 24rpx;
        color: #666;
      }
      .vip_icon{
        width: 100rpx;
        height: 100rpx;
        position: absolute;
        right: 10rpx;
        bottom: 10rpx;
        z-index: 1;
      }
    }
    .shop_vip_top{
      margin: 0 0 16rpx 16rpx;
      background: linear-gradient( 270deg, #FFF6F6 0%, #FFE6E6 100%);
    }
    .shop_vip_bottom{
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin-left: 16rpx;
      background: linear-gradient( 89deg, #F6FCFF 0%, rgba(219,242,255,0.8) 100%);
    }
  }
}
/* 活动须知css */
.shop_activity_must{
  margin: 0 auto 20rpx;
  width: 93%;
  background: #FFFFFF;
  border-radius: 16rpx;
  .shop_activity_title{
    width: 160rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 32rpx;
    color: #FFFFFF;
    text-align: center;
    background: linear-gradient( 86deg, #FC754A 0%, #FEB459 100%);
    border-radius: 0 50rpx 50rpx 0;
  }
  .shop_activity_content{
    padding: 30rpx;
  }
}
.bl_box {
  display: flex;
  align-items: center;
  margin-top: 4rpx;

  .val_num {
    font-size: 26rpx;
    color: #FF8548;
    margin-left: 6rpx;
    margin-top: -2px;
    text-align: center;
  }

  .time_text {
    color: #FC7532;
    font-size: 26rpx;
  }

  .u-line-progress {
    width: 100rpx;
    height: 16rpx;
    border-radius: 100rpx;
    background-color: #FFDECE;
    position: relative;

    .progress {
      width: 50%;
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      background-color: #FF8548;
      border-radius: 100rpx;
    }
  }
}

.fensiqun_box {
  display: flex;
  align-items: center;
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  width: 93%;
  margin: 0 auto;
  z-index: 9;
  position: relative;

  image {
    width: 100rpx;
    height: 100rpx;
  }

  .qun_info {
    padding-left: 14rpx;
    font-size: 28rpx;

    view:nth-child(1) {
      color: #333;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    view:nth-child(2) {
      text {
        color: #FC764A;
      }
    }
  }

  .lijinqun {
    font-size: 28rpx;
    border-radius: 200rpx;
    text-align: center;
    border: 1px solid #FC764A;
    padding: 14rpx 20rpx;
    margin-left: auto;
    color: #FC764A;
  }
}

.lingshi_vip {
  position: relative;
  margin: 30rpx auto;
  width: 93%;
  height: 56px;

  .vip_bg {
    position: absolute;
    top: 0;
    width: 100%;
  }

  .vip_info_box {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 92%;
    top: 12rpx;
    left: 0;
    right: 0;
    margin: 0 auto;

    .vip_title {
      font-size: 40rpx;
      color: #ffffff;
    }

    .vip_ifno {
      position: relative;
      left: 50rpx;
      color: #ffffff;
      font-size: 28rpx;
      padding-top: 5rpx;
    }

    .vip_kaitong {
      margin-left: auto;
      background-color: #ffffff;
      color: #F97632;
      width: 150rpx;
      height: 65rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 200rpx;
      border: 2px solid #FFE5AA;
      font-size: 24rpx;
    }
  }
}

/* 温馨提示 */

.wenxin {
  width: 93%;
  min-height: 292rpx;
  height: auto;
  background: #ffffff;
  margin: 28rpx auto;
  border-radius: 32.5rpx;
  position: relative;

}

.tishi {
  width: 650rpx;
  min-height: 254rpx;
  height: auto;
  background: #FFFDFC;
  border-radius: 32.5rpx;
  margin: 19rpx 17px;
  padding-bottom: 20rpx;
}

.tishi > view:first-child {
  padding-top: 26rpx;
  font-size: 32rpx;
  color: #333333;
  font-weight: bold;
  text-align: left;
}

.tishi_bottom {
  width: 100%;
  height: auto;
  margin-top: 14rpx;
  box-sizing: border-box;
  padding: 0 0;
  display: inline-block;
}

.tishi_bottom view {
  width: 100%;
  height: auto;
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #333;
  line-height: 25px;
}

.bottomBar {
  position: fixed;
  bottom: 0;
  z-index: 11;
  width: 100%;
  background-color: #FFFFFF;
  box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
  -webkit-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.05);
}
/* 报名流程css */
.regist_box{
  padding: 20rpx;
  display: flex;
  background: #FFF4E6;
  height: 40rpx;
  .regist_item{
    display: flex;
    align-items: center;
    .regist_item_icon{
      width: 40rpx;
      height:40rpx;
      padding-right: 10rpx;
    }
    .regist_title{
      font-size: 24rpx;
      color: #333;
    }
  }
  .regist_icon{
    width: 40rpx;
    height: 40rpx;
    padding: 0 10rpx;
  }
}

/* 底部报名按钮css */
.bottom-btn-zu {
  padding: 20rpx 30rpx calc(env(safe-area-inset-bottom) + 10rpx);
  display: flex;
  align-items: center;

  .btn-zu1 {
    font-size: 30rpx;
    border: 1px solid #DEDEDE;
    color: #888888;
    border-radius: 200rpx;
    padding: 25rpx 66rpx;
    text-align: center;
    margin: 0 20rpx 0 auto;
  }

  .btn-zu1elm {
    font-size: 30rpx;
    border: 1px solid #33a5fd;
    color: #33a5fd;
    border-radius: 200rpx;
    padding: 25rpx 66rpx;
    text-align: center;
    margin: 0 20rpx 0 auto;
  }

  .btn-zuwrap {
    // margin: 0 auto;
    // width: 60%;
    // margin-right: 40rpx;
  }

  .btn-zu2 {
    flex: 1;
    font-size: 32rpx;
    margin: 0 auto 0 20rpx;
    background: linear-gradient( 270deg, #FE7B20 0%, #FD9D54 100%);
    border-radius: 200rpx;
    padding: 25rpx 36rpx;
    text-align: center;
    color: #ffffff;
    position: relative;

    & .tishi_text {
      box-sizing: border-box;
      position: absolute;
      top: -40rpx;
      left: 60rpx;
      & .tishi_t{
        width: 260rpx;
        font-size: 24rpx;
        color: #ffffff;
        padding: 6rpx 10rpx;
        text-align: center;
        position: absolute;
        z-index: 1;
      }
      & .tishi_bg{
        width: 280rpx;
        height: 56rpx;
      }
    }
  }

  .btn-zuelm {
    flex: 1;
    font-size: 30rpx;
    margin: 0 auto 0 20rpx;
    background: linear-gradient(to right, #4bb0ff, 50%, #8ac7f8);
    border-radius: 200rpx;
    padding: 25rpx 36rpx;
    text-align: center;
    color: #ffffff;
    position: relative;

    & .tishi_text {
      box-sizing: border-box;
      position: absolute;
      top: -40rpx;
      left: 60rpx;
      & .tishi_t{
        font-size: 24rpx;
        color: #ffffff;
        padding: 6rpx 10rpx;
        text-align: center;
        position: absolute;
        z-index: 1;
      }
      & .tishi_bg{
        width: 280rpx;
        height: 56rpx;
      }
    }
  }

  .btn-zu3 {
    margin: 0 auto;
    font-size: 30rpx;
    background: linear-gradient(to right, #999, 50%, #999);
    border-radius: 200rpx;
    padding: 25rpx 66rpx;
    text-align: center;
    color: #ffffff;
    flex: 1;
  }
}

.wm_box {
  position: relative;
  width: 600rpx;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 32.5rpx;
}

.content_boxs {
  box-sizing: border-box;
  position: relative;

  .know_t {
    font-size: 32rpx;
    color: #000;
    text-align: center;
    box-sizing: border-box;
    padding: 20rpx;
    border-bottom: 1px solid #eee;
  }

  .btns_box {
    width: 280rpx;
    height: 64rpx;
    background: linear-gradient(270deg, #FEB85A 0%, #FC754A 100%);
    border-radius: 50rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 64rpx;
    text-align: center;
  }
}

.desc_text {
  box-sizing: border-box;
  padding: 30rpx 30rpx 0;
  font-size: 30rpx;
  color: #AAAAAA;
  line-height: 56rpx;
  text-align: left;

  text {
    color: #F97632;
    text-align: left;
  }
}

.pt_hot {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 22rpx;
  background: linear-gradient(270deg, #59392C 0%, #161410 99%);
  color: #FFDC7A;
  font-weight: bold;
  padding: 6rpx 8rpx;
  border-radius: 0 18rpx 0 18rpx;
}

.new_shop {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 22rpx;
  background: #25A547;
  color: #FFFFFF;
  font-weight: bold;
  padding: 6rpx 8rpx;
  border-radius: 0 18rpx 0 18rpx;
}

.qd-content {
  width: 600rpx;
  border-radius: 20rpx;
  background: white;
  text-align: center;

  .btns_con {
    display: flex;
    justify-content: flex-end;
    font-size: 26rpx;
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    border-top: #F3F3F3 1px solid;

    button {
      margin-left: 30rpx;
      font-size: 24rpx;
    }

    .zbbm {
      border-radius: 200rpx;
      width: 176rpx;
      background-color: #FFFFFF;
      border: #DDDDDD 1rpx solid;
      color: #999999;
    }

    .submit {
      border-radius: 200rpx;
      width: 176rpx;
      background: linear-gradient(131deg, #FC754A 0%, #FC754A 0%, #FEB95A 100%);
      color: #FFFFFF;
    }
  }

  .title {
    color: #000000;
    font-size: 32rpx;
    font-weight: bold;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    border-bottom: #F3F3F3 solid 1px;
  }

  .tip {
    margin: 20rpx 38rpx 0;
    font-weight: 500;
    font-size: 26rpx;
    color: #333333;
    line-height: 40rpx;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .tip1 {
    color: #FF3E00;
  }
}
/* 微信H5分享提示图片css */
.share_box_shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
}
.share_box_shadow image {
  max-width: 80%;
  margin: 10%;
}
/* 按钮分享弹窗css */
.share_box {
  box-sizing: border-box;
  background: linear-gradient( 177deg, #FDEECF 1%, #FFF7E4 75%);
  border-radius: 32rpx 32rpx 0 0;
  height: 700rpx;
  overflow: hidden;
  .text {
    font-size: 28rpx;
    color: #333;
  }
  .share_top{
    width: 100%;
    height: 480rpx;
    padding-bottom: 40rpx;
    position: relative;
    // background: #FFF7E4;

    .share_top_bg{
      width: 100%;
    }
    .share_top_warp{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 30rpx 60rpx;
      .share_top_warp_title{
        width: 100%;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #222222;
        text-align: center;
        margin: 10rpx 0;
      }
      .share_top_warp_subtitle{
        height: 50rpx;
        line-height: 50rpx;
        font-size: 28rpx;
        text-align: center;
      }
      .share_top_warp_content{
        width: 100%;
      }
    }
  }
  .wechat_box {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 30rpx 0;
    background: #FFFFFF;
    border-radius: 32rpx 32rpx 0 0;
    .small_box {
      flex: 1;
      .complete1 {
        text-align: center;
        background: none;
        border: none;
      }
      & button:after {
        border: none;
        background: none;
      }
      .icon {
        width: 64rpx;
        height: 64rpx;
        margin: 0 auto;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 26rpx;
        color: #333;
        line-height: 40rpx;
        margin-top: 16rpx;
      }
    }
  }
}

</style>
